<template>
	<view>
	<view class="content">
			<view class="f-tab">
        <view class="f-btn">影院 <iconArrow class="arrow" :point="0" /> </view>
				<view class="item" :class="{on:tabType===1}" @click="changeTab(1)">正在热映</view>
				<view class="c-line-item"></view>
				<view class="item" :class="{on:tabType===2}" @click="changeTab(2)">即将上映</view>
			</view>
			<view class="c-list">
				<view class="item" v-for="(item,index) in areaList" :key="index">
					  <image class="img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575454802250&di=b6201362df15f1968ec242482f172a54&imgtype=0&src=http%3A%2F%2Fpic.qiantucdn.com%2F58pic%2F19%2F41%2F70%2F82q58PIC4GH_1024.jpg" />
						<view class="title">罗小黑战绩 <text class="tiptxt">免</text> </view>
						<view class="role">小猪猪 </view>
						<view class="role-content">主演：贸小七、王大锤、牛逼啊...... </view>
						<view class="scene-content">今天235家影厅放映2465场</view> 
						<view class="b-line" />
						<view class="btn-buy">购买</view>
				</view>
		</view>
		</view>
	</view>
</template>
<script>
import iconArrow from '../components/icon-arrow';
	export default {
	components: {
		iconArrow
  },
		data() {
			return {
				captchaImg:'',
				tabType:1,
				areaList:[1,2,3,1,2,3,1,2,3,1,2,3]
			}
		},
		onLoad() {
		},
		methods: {
      btnLogin(){
				this.$api.goPage('/pages/index/index');
				// var self = this
				// 	self.$api.ajax({
		    //     	url:'/address/getAllArea',
		    //     	method:'GET',
		    //     	success:function(res){
				// 				console.log(res);
				// 				self.areaList =res.items;
		    //     	}
		    //   })
			},
			changeTab(type){
				this.tabType = type;
			}
		}
	}
</script>

<style  lang="scss" scoped>
.content{
	overflow-y:scroll;
  height: 100vh;
   -webkit-overflow-scrolling: touch;
}

	.f-tab{
	  	display: flex;
			width: px2vw(355);
			position: relative;
      .f-btn{
        font-size: px2vw($fz14);
				height:  px2vw(30);
				width: px2vw(55);
			  line-height:  px2vw(30);
        margin-left: px2vw(10); 
				margin-right: px2vw(35);
				position: relative;
        .arrow{
          margin-left: px2vw(5); 
        }
      }
		.item{
			height:  px2vw(30);
			line-height:  px2vw(30);
			font-size: px2vw($fz18);
			font-weight: 600;
			color: #888;
			padding-left: px2vw(15);
		}
		.on{
			color: #F24244;
		}
		.c-line-item{
			padding: 0 px2vw(10);
			border-right: px2vw(0.5) solid #ddd;
			height:  px2vw(20);
			margin-top:px2vw(5); 
		}
	}

	.c-list{
			width: px2vw(355);
			margin: px2vw(10) auto px2vw(30) auto;
			.item{
						height: px2vw(140);
						width: 100%;
						position: relative;
						color: #000;
						 .img{
							 height: px2vw(95);
							 width: px2vw(70);
							 border-radius: px2vw(8);
							 position: absolute;
							 top: px2vw(25);
							 left: 0;
						 }
						 .title{
							 font-size: px2vw($fz18);
							 font-weight:600;
							 position: absolute;
							 top: px2vw(25);
							 left: px2vw(85);
							 overflow: hidden;
							 text-overflow:ellipsis;
							 white-space: nowrap;
							 width: px2vw(180);
							 .tiptxt{
								 font-size: px2vw($fz12);
								 background-color: #F24244;
								 color: #F1F1F1;
								 padding:px2vw(1) px2vw(6);
								 border-radius: px2vw(2);
								 vertical-align: middle;
								 margin-left: px2vw(6);
							 }
						 }
						 .role{
						 	 font-size: px2vw($fz12);
							 position: absolute;
							 top: px2vw(55);
							 left: px2vw(85);
							 overflow: hidden;
							 text-overflow:ellipsis;
							 white-space: nowrap;
							 width: px2vw(180);
						 }
						 .scene-content,
						 .role-content {
						 	 font-size: px2vw($fz12);
							 position: absolute;
							 top: px2vw(84);
							 left: px2vw(85);
							 color: #888;
							 overflow: hidden;
							 text-overflow:ellipsis;
							 white-space: nowrap;
							 width: px2vw(180);
						 }
						 .scene-content{
							  top: px2vw(103);
						 }
						.b-line{
							border: px2vw(0.5) solid #eee;
							position: absolute;
							bottom: 0;
							right: 0;
							width: px2vw(275);
						}
						.btn-buy{
							background-color: #F24244;
							height:  px2vw(30);
							line-height:  px2vw(30);
							width:  px2vw(65);
							border-radius: px2vw(25);
							box-shadow: 0 px2vw(0.5)  px2vw(2)  #D2383A;
							position: absolute;
							right: 0;
							top: 50%;
							margin-top: - px2vw(15);
							text-align: center;
							font-size: px2vw($fz16);
							color: #fff;
						}
				}
	}
</style>
